<template>
    <div class="login">
        <vue-canvas-nest style="z-index: 1" :config="config"></vue-canvas-nest>
        <div class="login-form">
            <div class="login-title"><span>YIJIANYUN MANAGEMENT SYSTEM</span> 医检云管理系统</div>
            <div class="login-note">yijianyun management system</div>
            <el-form :model="form" status-icon ref="form">
                <el-form-item :rules="[{ required: true, message: '请输入管理员账号', trigger: 'blur'}]" prop="username">
                    <el-input prefix-icon="fa fa-user-o" type="text" placeholder="管理员账号" v-model="form.username" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item :rules="[{ required: true, message: '请输入管理员密码', trigger: 'blur'}]" prop="password">
                    <el-input prefix-icon="fa fa-unlock-alt" type="password" v-model="form.password" placeholder="管理员密码" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item :rules="[{ required: true, message: '请输入验证码', trigger: 'blur'}]" prop="captcha">
                    <el-input prefix-icon="fa fa-image" v-model.number="form.captcha" placeholder="验证码" style="width: 250px"></el-input>
                    <img @click="getCaptcha" class="login-captcha" :src="captchaLink" alt="">
                </el-form-item>
                <div class="refresh-captcha"><i class="fa fa-question-circle-o"></i> 看不清，点击验证码换一张</div>
                <el-form-item>
                    <el-button type="primary" class="login-btn" :loading="buttonLoading"
                               :disabled="formDisabled" @click="submitForm">{{buttonTitle}}</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    import vueCanvasNest from 'vue-canvas-nest';
    import {Captcha,UserLogin} from '@/utils/request';
    export default {
        components: { vueCanvasNest },
        data(){
            return {
                config : {color: '26,254,255', opacity: 1, zIndex: 55, count: 250},
                buttonLoading : false,
                formDisabled : false,
                buttonTitle : '登  录',
                captchaLink: '',
                form: {username: '', password: '', captcha: '', captchaKey: ''},
            }
        },
        created(){
            this.form = {username: '', password: '', captcha: '', captchaKey: ''};
            this.getCaptcha();
            this.keyupSubmit();
        },
        methods:{
            keyupSubmit(){
                document.onkeydown=(event)=>{
                    if(event.keyCode === 13){
                        this.submitForm();
                    }
                }
            },
            getCaptcha(){
                Captcha().then((res)=>{
                    if(res.code == 0){
                        this.captchaLink = res.data.img;
                        this.form.captchaKey = res.data.key;
                    }
                })
            },
            submitForm() {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        this.buttonLoading = true;
                        this.formDisabled = true;
                        this.buttonTitle = '登录中...';
                        UserLogin(this.form).then((res) =>{
                            this.buttonLoading = false;
                            this.formDisabled = false;
                            if(res.code){
                                this.buttonTitle = '登  录';
                                this.$notify.error({title: 'ERROR', message: res.msg});
                            }else{
                                this.$store.dispatch('userLogin',res.data).then(()=>{
                                    this.$notify({ type: 'success', duration:1000, title: 'SUCCESS', message: res.msg, onClose:()=>{
                                            this.$router.push({name:'Main'});
                                        }});
                                });
                            }
                        });
                    } else {
                        return false;
                    }
                });
            },
        }
    }
</script>

